<template>

  <div class="add-contract">
    <el-card class="card" shadow="hover">
      <template #header>
        <h3 class="title">合同详情</h3>
      </template>

      <!-- 新增表单 -->
      <el-form :model="contractForm" :rules="rules" ref="contractFormRef" label-width="120px" style="max-width: 800px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同名称" prop="contractName">
              <el-input v-model="contractForm.contractName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber">
              <el-input v-model="contractForm.contractNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同类别" prop="contractCategory">
              <el-input v-model="contractForm.contractCategory"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractDuration">
              <el-input v-model="contractForm.contractDuration"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="加盟方" prop="franchisor">
              <el-input v-model="contractForm.franchisor"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加盟方负责人" prop="franchisorResponsiblePerson">
              <el-input v-model="contractForm.franchisorResponsiblePerson"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="我方公司" prop="ourCompany">
              <el-input v-model="contractForm.ourCompany"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="我方负责人" prop="ourResponsiblePerson">
              <el-input v-model="contractForm.ourResponsiblePerson"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="签订日期" prop="signingDate">
              <el-date-picker v-model="contractForm.signingDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订地点" prop="signingLocation">
              <el-input v-model="contractForm.signingLocation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <el-input v-model.number="contractForm.amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-input v-model="contractForm.paymentMethod"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分期数" prop="installmentNumber">
              <el-input-number v-model="contractForm.installmentNumber" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每期比例" prop="proportionPerInstallment">
              <el-input v-model="contractForm.proportionPerInstallment"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="内容及要求" prop="contentAndRequirements">
              <el-input v-model="contractForm.contentAndRequirements" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="达成条件" prop="achievementConditions">
              <el-input v-model="contractForm.achievementConditions" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="notes">
              <el-input v-model="contractForm.notes" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" @click="submitForm(contractFormRef)">同意</el-button>
            <el-button @click="resetForm(contractFormRef)">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted,watch} from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const routerr = useRouter();
const router = useRoute();
onMounted(() => {

  console.log(router.params.formId);
  axios.get(`/contracts/getById?id=${router.params.formId}`)
      .then(resp=>{
        contractForm.value=resp.data
        console.log(  contractForm.value)
      })
});

watch(
    () => [router.params.formId],
    ([ newFormId], [ oldFormId]) => {
      console.log('Parameters changed:', newFormId );
      // 在这里执行你想要的操作，比如获取新数据等
      axios.get(`/contracts/getById?id=${newFormId}`)
          .then(resp=>{
            contractForm.value =resp.data
            console.log(  contractForm.value)
          })
    }
);

const contractFormRef = ref(null);

const contractForm = ref({});

// 表单验证规则
const rules = {
  contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
  contractNumber: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
  // 根据需要添加更多规则
};

// 提交表单
const submitForm = async (formEl) => {
  console.log(router.params.formId)
  axios.get(`/forms/agree?formId=${router.params.formId}`)
      .then(()=>{
        routerr.push('/todo')
      })

};

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.add-contract {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  margin-top: 60px;
}

.card {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}

.title {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}
</style>